<template>
	<view class="dialog-box">
		<view v-if="dialogVisibility" class="mask"></view>
		<view v-if="dialogVisibility" class="dialog">
			<view class="dialog-top"></view>
			<view class="close-btn">
				<image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E9%94%99%E5%8F%B7.png"></image>
			</view>
			<view class="content">
				<view class="content-inner">
					<view class="content-item" v-for="(item, index) in prizeDataformat" :key="`prize_${index}`">
						<view class="ewm">
							<image :src="getItemImage(item)" mode=""></image>
						</view>
						<view class="" v-if="!grandType">
							<view class="grandImg">
								<image :src="grandList[item.grandPrize].url" mode=""></image>
							</view>
							<view class="grandName" :style="{ 'color': '#' + grandList[item.grandPrize].color }">
								{{ grandList[item.grandPrize].name }}
							</view>
						</view>
						<view class="" v-else>
							<view class="grandName" :style="setBg(item.boxSku)">
								{{ yfsLevelList[item.boxSku.grandPrize] }}
							</view>
						</view>
						<!-- <view class="prize-name">
							<text>{{item.name}}</text>
						</view> -->
					</view>
				</view>
				<!-- <view class="left" @click="hideDialog">关闭</view> -->
			</view>
			<view class="prize-footer">
				<button class="left" :disabled="disable" @click="hideDialog">直接分解</button>
				<view class="right" @click="nextPrize">再抽一次</view>
				<!-- <view @click="hideDialog" class="close"> -->
				<!-- <image :src="require('@/static/center/return.png')" mode=""></image> -->
				<!-- </view> -->
			</view>
		</view>
	</view>
</template>

<script>

export default {
	props: {
		items: {
			type: Array | Object,
			default: () => []
		},
		prizeData: {
			type: Array | Object,
			default: () => []
		},
		dialogVisible: {
			type: Boolean,
			default: false
		},
		grandType: {
			type: String,
			default: ""
		},
		disable: {
			type: Boolean,
		}

	},
	data() {
		return {
			isDialogVisible: false,
			imgUrl: "",
			items: [],
			grandList: [{
				name: "普通",
				url: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/96541715156051501.png",
				color: "352b26"
			},
			{
				name: "高级",
				url: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/35221715156277602.png",
				color: "6a4c24"
			},
			{
				name: "史诗",
				url: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/34181715156318939.png",
				color: "508c7b"
			},
			{
				name: "稀有",
				url: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/99931715156376096.png",
				color: "638ef0"
			},
			{
				name: "传说",
				url: "https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/41021715156397303.png",
				color: "35085b"
			},
			]
		};
	},
	computed: {
		yfsLevelList() {
			const levelMap = {};
			if (Array.isArray(this.items)) {
				this.items.forEach(item => {
					levelMap[item.level] = item.name;
				});
			}
			console.log(levelMap);

			return levelMap;
			// return Array.isArray(this.items) ? this.items : [this.items]
		},
		prizeDataformat() {
			return Array.isArray(this.prizeData) ? this.prizeData : [this.prizeData]
		},
		dialogVisibility() {
			return this.dialogVisible
		}
	},
	created() {
		if (this.dialogVisible) {
			this.isDialogVisible = true;
			// console.log(this.grandList);

			// this.showDialog();
		}
	},
	methods: {

		getItemImage(item) {
			console.log(item);
			console.log(this.zhenbei_iconDisable);

			if (item.presentBoxSku) {
				return item.presentBoxSku.detailImages
			} else if (item.boxSku && !item.presentBoxSku) {
				return item.boxSku.detailImages;
			} else {
				return item.detailImages;
			}
		},
		setBg(item) {
			let bgColor = ''
			if (item.grandPrize == 0) {
				bgColor = "#352b26"
			} else if (item.grandPrize == 1) {
				bgColor = "#6a4c24"
			} else if (item.grandPrize == 2) {
				bgColor = "#508c7b"
			} else if (item.grandPrize == 3) {
				bgColor = "#35085b"
			} else if (item.grandPrize == 4) {
				bgColor = "#638ef0"
			}
			return `backgroundColor:${bgColor}`
		},
		hideDialog() {
			this.$emit("prizeClose");
		},
		// 确定查看下一个礼物
		nextPrize() {
			this.$emit("nextPrize");
		},
		changeColor(item) {
			return "color:#" + item.color + ";"
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog-box {
	position: relative;
	width: 100%;
	height: 100vh;
}

uni-button {
	border: none;
	background-color: transparent !important;
	margin: 0;

	// &::after {
	// 	border: none;
	// 	background: none;
	// 	margin: 0;
	// }
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明黑色遮罩层 */
	z-index: 998;
	/* 比弹框的z-index小 */
}

.dialog {
	position: fixed;
	width: 80%;
	max-height: 1200rpx;
	border-radius: 30rpx;
	background: url("../../../static/center/dialog_prize_bg.png") no-repeat;
	background-size: 100% 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20rpx 20px 60rpx;
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	z-index: 999;
}

.content {
	position: relative;
	padding: 80rpx 82rpx;
	margin: 20rpx auto 0;
	background: url("../../../static/center/dialog_prize_content_bg.png") no-repeat;
	background-size: 100% 100%;

}

.content-inner {
	min-height: 400rpx;
	max-height: 300rpx;
	overflow: hidden;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	-webkit-overflow-scrolling: touch;
}

.dialog-top {
	width: 100%;
	height: 100rpx;
	margin-top: 42rpx;
	background: url('../../../static/center/dialog_bg_top_img.png') center center no-repeat;
	background-size: auto 100%;
	z-index: 999;
}

.content-item {
	position: relative;
	width: 110rpx;
	height: 110rpx;
	margin: 0 5rpx;
	margin-bottom: 20rpx;
	background: url('../../../static/center/dialog_prize_content_item_bg.png') no-repeat;
	background-size: 100% 100%;
}

.ewm {
	width: 100%;
	height: 100%;
	// margin: 40rpx auto 0;
	text-align: center;
	overflow: hidden;
}

.ewm image {
	width: 100%;
	height: 100%;
}

.prize-name {
	width: 100%;
	text-align: center;
	line-height: 100rpx;
	font-size: 32rpx;
	line-height: 1.5;
	color: aliceblue;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.close-btn {
	display: none;
	position: absolute;
	top: -20rpx;
	right: -20rpx;
	z-index: 99;
}

.close-btn image {
	width: 50rpx;
	height: 50rpx;
}

.prize-footer {
	position: relative;
	width: 100%;
	height: 140rpx;
	padding: 0 40rpx;
	box-sizing: border-box;
	border-radius: 30rpx 30rpx 0 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		width: 36%;
		height: 80%;
		background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BA%95%E9%83%A8%E6%8C%89%E9%92%AE.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
	}

	.right {
		width: 34%;
		height: 80%;
		background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/%E5%BA%95%E9%83%A8%E6%8C%89%E9%92%AE.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: white;
		font-size: 34rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
	}
}

.grandImg {
	position: absolute;
	top: -20rpx;
	left: 50%;
	width: 88rpx;
	height: 46rpx;
	transform: translate(-50%, 0);
	z-index: 9;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

.grandName {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 110rpx;
	font-size: 24rpx;
	text-align: center;
	color: #fff;
}
</style>
